<template>
	<customize-head title="进修管理平台每日运营分析" :time="mainData.datetime">
		<card-box>
			<u-cell-group :border="false">
				<cell-item v-for="i in studentStatisticsConfig" :key="i.key" :title="i.title"
					:title-value="mainData.studentStatisticsData[i.key]" :sub-title="i.subTitle" unit="人"
					:subValue="mainData.studentStatisticsData[i.subKey]" :arrow="false"
					:icon="require('@/static/h5/u138.png')" :iconSize="30" />
			</u-cell-group>
		</card-box>
		<card-box title="近7日人员变化趋势图">
			<vue-echarts :option="mainData.studentCharts" height="260px" canvasId="studentCharts" />
		</card-box>
		<card-box title="今日报名人员TOP3的科室">
			<vue-echarts :option="mainData.departmentSectionTOP3Charts" height="180px" canvasId="departmentSectionTOP3Charts" />
		</card-box>
		<card-box title="报名情况">
			<circle-stat-box :col="4">
				<circle-stat v-for="(i, index) in registrationStatusConfig" :key="index"
					:number="mainData.registrationStatusData[i.key] || 0" :desc="i.title" :type="i.type"></circle-stat>
			</circle-stat-box>
		</card-box>
		<card-box title="进修情况" style="padding-bottom: 0;">
			<u-cell-group :border="false" style="padding: 20rpx 0;">
				<cell-item v-for="i in advancedTrainingSituationConfig" :key="i.subKey" :title="i.title"
					:is-title-value="false" :subValue="mainData.advancedTrainingSituationData[i.subKey]" unit="人"
					:arrow="false" :icon="require('@/static/h5/u3.svg')" iconSize="30" />
			</u-cell-group>
		</card-box>
	</customize-head>
</template>
<script>
	import customizeHead from "./components/customize-head/customize-head.vue";
	import cardBox from "./components/card-box/card-box.vue";
	import cellItem from "./components/cell-item/cell-item.vue";
	import vueEcharts from "./components/vue-echarts/vue-echarts.vue";
	import gridBox from "./components/grid-box/grid-box.vue";
	import circleStat from "./components/circleStat.vue";
	import circleStatBox from "./components/circle-stat-box.vue";

	import testData from "./testData";
	export default {
		components: {
			customizeHead,
			cardBox,
			cellItem,
			vueEcharts,
			gridBox,
			circleStat,
			circleStatBox,
		},
		mounted() {
			uni.showLoading({
				title:"加载中"
			});
			uni.$u.http.get("/business/polymerization/analysis").then(res=>{
				console.log(res);
				this.dataInfo = res.data;
			}).finally(()=>{
				uni.hideLoading();
			})
		},
		data() {
			return {
				dataInfo:{},
				//学员统计配置
				studentStatisticsConfig: [{
						"title": "招生报名",
						"key": "signUp",
						"subTitle": "今日报名",
						"subKey": "todaySignUp"
					},
					{
						"title": "进修学员",
						"key": "advancedTrainingStudents",
						"subTitle": "今日报到",
						"subKey": "reportToday"
					},
					{
						"title": "结业学员",
						"key": "graduatedTrainees",
						"subTitle": "今日结业",
						"subKey": "completeTheCourseToday"
					}
				],
				//报名情况 配置
				registrationStatusConfig: [{
						"title": "待审批/转审中",
						"key": "inProgress",
						"type": "primary"
					},
					{
						"title": "待通知",
						"key": "awaitingNotification",
						"type": "error"
					},
					{
						"title": "待确认",
						"key": "awaitingConfirmation",
						"type": "success"
					},
					{
						"title": "待签字",
						"key": "awaitingSignature",
						"type": "warning"
					}
				],
				//进修情况 配置
				advancedTrainingSituationConfig: [{
					title: "进修待报到",
					subKey: 'pendingRegistrationForAdvancedTraining',
				}, {
					title: "进修待分配",
					subKey: 'pendingAllocationForAdvancedTraining',
				}, {
					title: "结业待审批",
					subKey: 'completionOfTrainingPendingApproval',
				}, {
					title: "进修待评论",
					subKey: 'advancedTrainingAwaitingReview',
				}]
			}
		},
		computed: {
			mainData() {
				let {
					personnelChangesData = {}, // 近7日人员变化趋势图
						departmentSectionTOP3Data = {}, //今日报名人员TOP3的科室
						...res
				} = this.dataInfo || {};
				departmentSectionTOP3Data = departmentSectionTOP3Data?.departmentSectionTOP3Data ?? [];
				return {
					studentStatisticsData: {}, //学员统计数据
					registrationStatusData: {}, //报名情况数据
					advancedTrainingSituationData: {}, //进修情况数据
					...res,
					//近7日人员变化趋势图
					studentCharts: {
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							bottom: 0,
							left: 'center',
							data: personnelChangesData?.traineeData?.map(x => x.name)
						},
						grid: {
							top: 20,
							left: 10,
							right: 20,
							bottom: 30,
							containLabel: true
						},
						xAxis: {
							type: 'category',
							axisTick: {
								// 控制刻度是否和标签对齐
								alignWithLabel: true
							},
							data: personnelChangesData?.xAxisDate || []
						},
						yAxis: [{
							type: 'value'
						}],
						series: personnelChangesData?.traineeData?.map(x => {
							return {
								type: 'line',
								smooth: true,
								...x,
								data: x.value
							};
						})
					},
					//今日报名人员TOP3的科室
					departmentSectionTOP3Charts: {
						legend: {},
						grid: {
							top: 20,
							left: 10,
							right: 40,
							bottom: 0,
							containLabel: true
						},
						xAxis: {
							type: 'value',
							// 隐藏 x 轴刻度线
							axisTick: {
								show: false
							},
							// 隐藏 x 轴轴线（竖线）
							axisLine: {
								show: false
							},
							// 隐藏 x 轴网格线（竖线）
							splitLine: {
								show: false
							}
						},
						yAxis: {
							type: 'category',
							// 隐藏 y 轴刻度线
							axisTick: {
								show: false
							},
							// 隐藏 y 轴轴线（横线）
							axisLine: {
								show: false
							},
							// 隐藏 y 轴网格线（横线）
							splitLine: {
								show: false
							},
							data: departmentSectionTOP3Data.map(x => x.name)
						},
						series: [{
							type: 'bar',
							// 配置柱子宽度
							barWidth: 24,
							// 配置数值标签
							label: {
								show: true, // 显示标签
								position: 'inside', // 标签位置，可选值：'top'、'right'、'left'、'bottom'、'inside'、'insideLeft'等
								valueAnimation: true, // 数值标签的动画效果
								formatter: function(params) {
									return params.value + ' 人'; // 添加单位
								}
							},
							itemStyle: {
								barBorderRadius: 6, // 柱状图圆角半径（单位：像素）
							},
							data: departmentSectionTOP3Data
						}]
					},

				};
			}
		}
	}
</script>